<template>
	<div class="listContainer">
        <div class="listItem">
            <div class="bg-title">基本使用</div>
            <BasicUse />
        </div>

        <div class="listItem">
            <div class="bg-title">地图 chart</div>
            <MapChart />
        </div>

        <div class="listItem">
            <div class="bg-title">配置主题</div>
            <ThemeChart />
        </div>
	</div>
</template>

<script>
import BasicUse from "./components/BasicUse"
import MapChart from "./components/MapChart"
import ThemeChart from "./components/ThemeChart"
export default {
	data() {
		return {};
	},
    components:{
        BasicUse,
        MapChart,
        ThemeChart
    }
};
</script>
<style lang="scss">
    body{
        margin: 0;
    }
    .listContainer{
        display: flex;
        flex-wrap: wrap;
    }
    .listItem{
        margin-bottom: 20px;
        width: calc(50% - 30px);
        margin-right: 30px
    }
    .bg-title{
        line-height: 50px;
        border-bottom: 2px solid pink;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
        text-indent: 20px;
    }
</style>
